<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='../js/vue.js'></script>
    <script type='text/javascript' src='../js/vue-router.js'></script>

    <style>
        .router-link-exact-active {
            color: red;
        }
    </style>
</head>

<body>
    <div id='app'>

        <!-- 1、创建结构 -->
        <router-link to="/user">user</router-link>
        <router-link to="/register">register</router-link>

        <!-- 3、提供坑位 -->
        <router-view></router-view>

    </div>
    <script type='text/javascript'>
        // <!-- 2、创建组件 -->
        var user = {
            template: `<h1>我是user组件</h1>`
        }

        var tab1 = {
            template: `<h1>我是tab1组件</h1>`
        }

        var tab2 = {
            template: `<h1>我是tab2组件</h1>`
        }

        var register = {
            template: `<h2>我是register组件
                    <router-link to="/tab1">tab1</router-link>
                    <router-link to="/tab2">tab2</router-link>
                
                    <router-view></router-view>
                </h2>`
        }

        /* 4、创建路由匹配规则 */
        /* 
        1、引入路由js文件
        2、创建路由对象
        3、routes=======   =====[route  router  routes  $router]
        
        */
        const router = new VueRouter({
            routes: [
                { path: '/', redirect: '/user' },
                { path: '/user', component: user },
                // { path: '/register', component: register,redirect: '/tab1' ,children:[
                //     {path:'/tab1',component:tab1},
                //     {path:'/tab2',component:tab2},
                // ] },

                { path: '/register', component: register },

                { path: '/tab1', component: tab1 },
                { path: '/tab2', component: tab2 },
            ]
        })

        /* 5、将router跟vue扯上关系=====进行挂载 */

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            },
            components: {
                user,
                register
            },
            router
        });
    </script>
</body>

</html>